<template>
    <ul class="components-list">
        <!-- 导航栏 -->
        <li draggable="true" @dragstart="dragStart" data-name="App Bar">
            <appbar />
        </li>
        <!-- 栅格布局 -->
        <li draggable="true" @dragstart="dragStart" data-name="Grid">
            <shanGe />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Text Field">
            <textField />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Flat Button">
            <FlatButton />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Raised Button">
            <RaisedButton />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Icon Button">
            <iconButton />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Icon">
            <icon />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Floating Action Button">
            <floatingActionButton />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Avatar">
            <avatar />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Chip">
            <chip />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Card Header">
            <cardHeader />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Sub Header">
            <subHeader />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="List">
            <list />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="List Item">
            <listItem />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Table">
            <grid />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Date Picker">
            <datePicker />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Time Picker">
            <timePicker/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Badge">
            <badge/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Bottom Nav">
            <navigation/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Tabs">
            <tab/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Breadcrumb">
            <breadcrumb/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Checkbox">
            <checkBox />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Radio">
            <radio/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Switch">
            <swit/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Select Field">
            <selectField/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Paper">
            <paper/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Pagination">
            <pagination/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Slider">
            <slider/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Divider">
            <divider/>
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Linear Progress">
            <linearProgress />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Circular Progress">
            <circularProgress />
        </li>
        <li draggable="true" @dragstart="dragStart" data-name="Card">
            <card />
        </li>
        <!--
        <li draggable="true" @dragstart="dragStart" data-name="Back Top">
            <backTop/>
        </li>
        -->
    </ul>
</template>

<script>
    import appbar from './components/appbar'
    import shanGe from './components/shanGe'
    import textField from './components/textField'
    import FlatButton from './components/FlatButton'
    import iconButton from './components/iconButton'
    import RaisedButton from './components/RaisedButton'
    import FloatingActionButton from './components/floatingActionButton'
    import avatar from './components/avatar'
    import icon from './components/icon'
    import list from './components/list'
    import listItem from './components/listItem'
    import grid from './components/grid'
    import datePicker from './components/datePicker'
    import timePicker from './components/timePicker'
    import badge from './components/badge'
    import navigation from './components/nav'
    import tab from './components/tab'
    import breadcrumb from './components/breadcrumb'
    import checkBox from './components/checkBox'
    import radio from './components/radio'
    import swit from './components/switch'
    import selectField from './components/selectField'
    import pagination from './components/pagination'
    import slider from './components/slider'
    import divider from './components/divider'
    import linearProgress from './components/linearProgress'
    import circularProgress from './components/circularProgress'
    import backTop from './components/backTop'
    import chip from './components/chip'
    import paper from './components/paper'
    import cardHeader from './components/cardHeader'
    import card from './components/card'
    import subHeader from './components/subHeader'

    export default {
        name: "muse-ui-index",
        components: {
            appbar,
            shanGe,
            textField,
            FlatButton,
            iconButton,
            RaisedButton,
            FloatingActionButton,
            avatar,
            icon,
            list,
            listItem,
            grid,
            datePicker,
            timePicker,
            badge,
            navigation,
            tab,
            breadcrumb,
            checkBox,
            radio,
            swit,
            selectField,
            pagination,
            slider,
            divider,
            linearProgress,
            circularProgress,
            backTop,
            chip,
            paper,
            cardHeader,
            card,
            subHeader
        },
        methods: {
            handleTabChange(val) {
                this.activeUI = val
            },
            getComponent(e) {
                if (!e)
                    return
                if (e.localName !== 'li')
                    return this.getComponent(e.parentElement)
                else
                    return e
            },
            removeDom(e) {
                if (e && e.parentElement)
                    e.parentElement.removeChild(e)
            },
            dragStart(e) {
                let componentName = e.target.getAttribute('data-name')
                let info = {
                    name: componentName,
                    ui: this.activeUI
                }
                e.dataTransfer.setData('info', JSON.stringify(info))
            }
        }
    }
</script>

<style scoped>

</style>